<template>
    <div>
        <Modal
         :title="L('EditLeaveForm')"
         :value="value"
         @on-ok="save"
         @on-visible-change="visibleChange"
        >
            <Form ref="tenantForm"  label-position="top" :rules="tenantRule" :model="leaveForm">

                  <FormItem :label="L('Days')" prop="days">
                    <Input v-model="leaveForm.days" :maxlength="32" :minlength="2"></Input>
                </FormItem>
                <FormItem :label="L('Reason')" prop="reason">
                    <Input v-model="leaveForm.reason" :maxlength="32" :minlength="2"></Input>
                </FormItem>
                <FormItem :label="L('Memo')" prop="memo">
                    <Input v-model="leaveForm.memo" :maxlength="1024"></Input>
                </FormItem>

            </Form>
            <div slot="footer">
                <Button @click="cancel">{{L('Cancel')}}</Button>
                <Button @click="save" type="primary">{{L('OK')}}</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
    import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
    import Util from '../../lib/util'
    import AbpBase from '../../lib/abpbase'
    import LeaveForm from '@/store/entities/leaveForm';
    @Component
    export default class EditLeaveForm extends AbpBase{
        @Prop({type:Boolean,default:false}) value:boolean;
        leaveForm:LeaveForm=new LeaveForm();
        save(){
            (this.$refs.tenantForm as any).validate(async (valid:boolean)=>{
                if(valid){
                    await this.$store.dispatch({
                        type:'leaveForm/update',
                        data:this.leaveForm
                    });
                    (this.$refs.tenantForm as any).resetFields();
                    this.$emit('save-success');
                    this.$emit('input',false);
                }
            })
        }
        cancel(){
            (this.$refs.tenantForm as any).resetFields();
            this.$emit('input',false);
        }
        visibleChange(value:boolean){
            if(!value){
                this.$emit('input',value);
            }else{
                this.leaveForm=Util.extend(true,{},this.$store.state.leaveForm.editLeaveForm);
            }
        }
        tenantRule={
            name:[{required: true,message:this.L('FieldIsRequired',undefined,this.L('LeaveFormName')),trigger: 'blur'}],
            tenancyName:[{required:true,message:this.L('FieldIsRequired',undefined,this.L('TenancyName')),trigger: 'blur'}]
        }
    }
</script>

